<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主界面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="fly,layui,前端社区">
    <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
    <link rel="stylesheet" href="../../res/layui/css/layui.css">
    <link rel="stylesheet" href="../../res/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
    <div class="layui-container">
        <a class="fly-logo" href="../jie/index.html">
            <img src="../../res/images/logo.png" alt="layui">
        </a>
        <ul class="layui-nav fly-nav layui-hide-xs">
            <li class="layui-nav-item">
                <a href="../html/jie/index.html"><i class="iconfont icon-jiaoliu"></i>交流</a>
            </li>
            <li class="layui-nav-item">
                <a href="../case/case.html"><i class="iconfont icon-iconmingxinganli"></i>案例</a>
            </li>
            <li class="layui-nav-item">
                <a href="http://www.layui.com/" target="_blank"><i class="iconfont icon-ui"></i>框架</a>
            </li>
        </ul>

        <div id="user_view">
            <ul class="layui-nav fly-nav-user">
                <!-- 未登入的状态 -->
                <li class="layui-nav-item">
                    <a class="iconfont icon-touxiang layui-hide-xs" href="../user/login.html"></a>
                </li>
                <li class="layui-nav-item">
                    <a href="../user/login.html">登入</a>
                </li>
                <li class="layui-nav-item">
                    <a href="../user/reg.html">注册</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="fly-panel fly-column">
    <div class="layui-container">
        <ul class="layui-clear" id="news_type_item">
            <li class="layui-hide-xs"><a href="../jie/index.html">首页</a></li>
            <li><a href="javascript:void(0)" onclick="change_type(0)">提问</a></li>
            <li><a href="javascript:void(0)" onclick="change_type(1)">分享</a></li>
            <li><a href="javascript:void(0)" onclick="change_type(2)">讨论</a></li>
            <li><a href="javascript:void(0)" onclick="change_type(3)">建议</a></li>
            <li><a href="javascript:void(0)" onclick="change_type(4)">公告</a></li>
            <li><a href="javascript:void(0)" onclick="change_type(5)">动态</a></li>
            <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>
        </ul>

        <div class="fly-column-right layui-hide-xs">
            <span class="fly-search"><i class="layui-icon"></i></span>
            <a href="add.html" class="layui-btn">发表新帖</a>
        </div>
        <div class="layui-hide-sm layui-show-xs-block"
             style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
            <a href="add.html" class="layui-btn">发表新帖</a>
        </div>
    </div>
</div>

<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="fly-panel" style="margin-bottom: 0;">
                <ul class="fly-list">
                    <div id="news_info_view"></div>
                </ul>

                <div id="user_info_page" style="text-align: center"></div>
            </div>
        </div>

        <!--热议-->
        <div class="layui-col-md4">
            <dl class="fly-panel fly-list-one">
                <dt class="fly-panel-title">本周热议</dt>
                <div id="hot_news_info_view"></div>
            </dl>

            <div class="fly-panel">
                <div class="fly-panel-title">
                    这里可作为广告区域
                </div>
                <div class="fly-panel-main">
                    <a href="" target="_blank" class="fly-zanzhu" style="background-color: #393D49;">虚席以待</a>
                </div>
            </div>

            <div class="fly-panel fly-link">
                <h3 class="fly-panel-title">友情链接</h3>
                <dl class="fly-panel-main">
                    <dd><a target="_blank">layui</a>
                    <dd>
                    <dd><a target="_blank">WebIM</a>
                    <dd>
                    <dd><a target="_blank">layer</a>
                    <dd>
                    <dd><a target="_blank">layDate</a>
                    <dd>
                    <dd>
                        <a class="fly-link">申请友链</a>
                    <dd>
                </dl>
            </div>

        </div>
    </div>
</div>

<div class="fly-footer">
    <p><a href="http://fly.layui.com/" target="_blank">Fly社区</a> 2017 &copy; <a href="http://www.layui.com/"
                                                                                target="_blank">layui.com 出品</a></p>
    <p>
        <a href="http://fly.layui.com/jie/3147/" target="_blank">付费计划</a>
        <a href="http://www.layui.com/template/fly/" target="_blank">获取Fly社区模版</a>
        <a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
    </p>
</div>

</body>
</html>

<script src="../../res/layui/layui.js"></script>
<script type="text/javascript" src="../../res/jquery-1.7.2.min.js"></script>
<script>

</script>

<script id="user_tmp" type="text/html">

    <ul class="layui-nav fly-nav-user">
        <li class="layui-nav-item">
            <a class="fly-nav-avatar" href="javascript:;">
                <cite class="layui-hide-xs">{{d.username}}</cite>
                <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i>
                <i class="layui-badge fly-badge-vip layui-hide-xs">VIP</i>
                <img src="{{d.headurl}}">
            </a>
            <dl class="layui-nav-child">
                <dd><a href="../user/set.html"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
                <dd><a href="../user/message.html"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a>
                </dd>
                <dd><a href="../user/home.html"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a>
                </dd>
                <hr style="margin: 5px 0;">
                <dd><a onclick="logout()" style="text-align: center;cursor: pointer">退出</a></dd>
            </dl>
        </li>
    </ul>
</script>
<script id="news_info_tmp" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
    <li>
        <a href="user/home.html" class="fly-avatar">
            <img src="{{item.headurl}}"
                 alt="{{item.username}}">
        </a>
        <h2>
            <a class="layui-badge">
                {{item.newstype}}
            </a>
            <a href="./detail.html?#/id={{item.id}}">{{item.title}}</a>
        </h2>
        <div class="fly-list-info">
            <a href="../user/home.html" link>
                <cite>{{item.username}}</cite>
            </a>
            <span>{{item.creationtime}}</span>
            <span class="fly-list-nums">
                <i class="iconfont icon-pinglun1" title="评论"></i> {{item.commentcount}}
            </span>
        </div>
        <div class="fly-list-badge">
            {{# if(item.tofine == 1){ }}
            <span class="layui-badge layui-bg-red">精帖</span>
            {{# } }}
            {{# if(item.totop == 1){ }}
            <span class="layui-badge layui-bg-black">置顶</span>
            {{# } }}
        </div>
    </li>
    {{#  }); }}
    {{#  if(d.list.length === 0){ }}
    无数据
    {{#  } }}
</script>
<script id="hot_news_info_tmp" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <dd>
        <a href="./detail.html?#/id={{item.id}}">{{item.title}}</a>
        <span><i class="iconfont icon-pinglun1"></i> {{item.commentcount}}</span>
    </dd>
    {{#  }); }}
    {{#  if(d.length === 0){ }}
    无数据
    {{#  } }}
</script>
<script>

    $(function () {
        user_info();
        news_info();
        hot_news_info();

        $('.fly-search').on('click', function () {
            layer.open({
                type: 1,
                title: false,
                closeBtn: false,
                shadeClose: true,
                maxWidth: 10000,
                skin: 'fly-layer-search',
                content: ['<input autocomplete="off" placeholder="搜索内容，回车跳转" type="text">'].join(''),
                success: function (layero) {
                    let input = layero.find('input');
                    input.focus();
                    input.bind('keyup', function(event) {
                        if (event.keyCode == "13") {
                            $.ajax(address + '/news/getNews', {
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json; charset:UTF-8',
                                data: JSON.stringify({
                                    pageNum: 1,
                                    pageSize: 10,
                                    title: input.val()
                                })
                            }).done(function (data) {
                                input.val('');
                                layer.closeAll();
                                news_info_show(data.data);
                                layui.use('laypage', function () {
                                    let laypage = layui.laypage;
                                    laypage.render({
                                        elem: 'user_info_page',
                                        count: data.data.total,
                                        jump: function (obj, first) {
                                            if (!first) {
                                                $.ajax(address + '/news/getNews', {
                                                    type: 'POST',
                                                    dataType: 'json',
                                                    contentType: 'application/json; charset:UTF-8',
                                                    data: JSON.stringify({
                                                        pageNum: obj.curr,
                                                        pageSize: obj.limit,
                                                        newstype: layui.router().search.newstype
                                                    })
                                                }).done(function (data) {
                                                    news_info_show(data.data);
                                                })
                                            }
                                        }
                                    })
                                })
                            })
                        }
                    });

                }
            })
        });
    })


    function user_info() {
        $.ajax(address + '/login/getUserInfoByTicket', {
            type: 'POST',
            dataType: 'json'
        }).done(function (data) {
            layui.use('laytpl', function () {
                let laytpl = layui.laytpl;
                if (data.data != undefined) {
                    let user_view = document.getElementById("user_view");
                    let user_tmp = document.getElementById("user_tmp").innerHTML;
                    laytpl(user_tmp).render(data.data, function (html) {
                        user_view.innerHTML = html;
                    });
                    layui.use('element', function () {
                        let element = layui.element;
                        element.init();
                    });
                }
            })
        })
    }

    function news_info() {

        $('#news_type_item').find('li').each(function () {
            if ($(this).index() - 1 == layui.router().search.newstype) {
                $(this).addClass('layui-this');
            } else {
                $(this).removeClass('layui-this');
            }
        })


        $.ajax(address + '/news/getNews', {
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json; charset:UTF-8',
            data: JSON.stringify({
                pageNum: 1,
                pageSize: 10,
                newstype: layui.router().search.newstype
            })
        }).done(function (data) {
            news_info_show(data.data);
            layui.use('laypage', function () {
                let laypage = layui.laypage;
                laypage.render({
                    elem: 'user_info_page',
                    count: data.data.total,
                    jump: function (obj, first) {
                        if (!first) {
                            $.ajax(address + '/news/getNews', {
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json; charset:UTF-8',
                                data: JSON.stringify({
                                    pageNum: obj.curr,
                                    pageSize: obj.limit,
                                    newstype: layui.router().search.newstype
                                })
                            }).done(function (data) {
                                news_info_show(data.data);
                            })
                        }
                    }
                })
            })
        })
    }

    function hot_news_info() {
        $.ajax(address + '/news/getHotNews', {
            type: 'POST',
            dataType: 'json'
        }).done(function (data) {
            layui.use('laytpl', function () {
                let laytpl = layui.laytpl;
                if (data.data != undefined) {
                    let hot_news_info_view = document.getElementById("hot_news_info_view");
                    let hot_news_info_tmp = document.getElementById("hot_news_info_tmp").innerHTML;
                    laytpl(hot_news_info_tmp).render(data.data, function (html) {
                        hot_news_info_view.innerHTML = html;
                    });
                    layui.use('element', function () {
                        let element = layui.element;
                        element.init();
                    });
                }
            })
        })
    }

    function news_info_show(data) {
        layui.use('laytpl', function () {
            let laytpl = layui.laytpl;
            if (data != undefined) {
                let news_info_view = document.getElementById("news_info_view");
                let news_info_tmp = document.getElementById("news_info_tmp").innerHTML;
                for (let i = 0; i < data.list.length; i++) {
                    switch (data.list[i].newstype) {
                        case '0':
                            data.list[i].newstype = '提问';
                            break;
                        case '1':
                            data.list[i].newstype = '分享';
                            break;
                        case '2':
                            data.list[i].newstype = '讨论';
                            break;
                        case '3':
                            data.list[i].newstype = '建议';
                            break;
                        case '4':
                            data.list[i].newstype = '公告';
                            break;
                        case '5':
                            data.list[i].newstype = '动态';
                            break;
                        default:
                            data.list[i].newstype = '未知';
                            break;
                    }
                }
                laytpl(news_info_tmp).render(data, function (html) {
                    news_info_view.innerHTML = html;
                });
                layui.use('element', function () {
                    let element = layui.element;
                    element.init();
                });
            }
        })
    }

    function logout() {
        $.ajax(address + '/login/logout', {
            type: 'POST',
            dataType: 'json'
        }).done(function (data) {
            window.location.reload()
        })
    }


    function change_type(newstype) {
        window.location = './index.html?#/newstype=' + newstype;
        news_info();
    }

</script>

